<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 5px solid;
            padding: 10px;
            margin: 20px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 50px;
            position: absolute;
        }
        .container{
            width: 200px;
            height: 200px;
            border: 1px solid;
            margin-left: 100px;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <!-- <div class="container">
        <div class="box2"></div>

    </div> -->
    <script>
        //一、 元素的尺寸 ： 
        // 1.offsetWidth 或者 offsetHeight
        // username    userName 小驼峰  UserName 大驼峰
        // offset包含 ： 自身宽或者高 + border + padding
        // var boxEle = document.querySelector(".box");
        // console.log(boxEle.offsetWidth,boxEle.offsetHeight);

        // 2.clientWidth 或者 clientHeight；
        // client : 自身 + padding  （不包含边框的宽度）;
        // var boxEle = document.querySelector(".box");
        // console.log(boxEle.clientWidth,boxEle.clientHeight);


        // 二、元素的偏移量
        // 1.offsetLeft : 元素相对于左边的偏移量
        //   offsetTop
        // 第一种情况 ： 元素没有定位的情况 ，相对于浏览器的左边偏移量
        // var  boxEle = document.querySelector(".box2");
        // console.log(boxEle.offsetLeft);

        // 第二种情况 ： 元素有定位 ，偏移量是相对于定位父级的偏移量
        // var  boxEle = document.querySelector(".box2");
        // console.log(boxEle.offsetLeft);


        // 2.clientLeft 和 clientTop ：左边和上边边框的宽度
        // var boxEle = document.querySelector(".box");
        // console.log(boxEle.clientLeft,boxEle.clientTop);


        /* 
            一、元素的尺寸 
            1.offsetWidth 、offsetHeight  ： 自身 + border + padding
            2.clientWidth 、clientHeight ： 自身 + padding
            二、元素的偏移量
            1.offsetLeft 、offsetTop
                第一： 没有定位 ：相对于浏览器 左边或者上面的偏移量
                第二：有定位 ： 相对于定位父级左边或者是上边的偏移量
            2.clientLeft 、clientTop ：左边和上面边框的宽度
        
        
        
        
        */
    </script>
</body>
</html>